<template>
  <div>
    <Book :show-page="showPage"
          :double-page="doublePage"
          @getMaxPageNumber="e=>getMaxPageNumber=e"
    >
      <BookItem
        v-for="(item,index) in bookItem"
        :key="index+'bookitem'"
      >
        <div :style="{backgroundColor: item.color}" style="height: 100%;color:white">
          marginLeft: index * 50 + 'px',
          {{item.name}}
        </div>
      </BookItem>
    </Book>
    <div>
      <el-button @click="add">+</el-button>
      <el-button @click="minus">-</el-button>
      {{showPage}}
      <el-button @click="doublePage=!doublePage">{{ doublePage }}</el-button>
    </div>
  </div>
</template>

<script>
import Book from "../../../local_modules/ZhiXinLib/components/Book/Book.vue";
import BookItem from "../../../local_modules/ZhiXinLib/components/Book/BookItem.vue";

export default {
  name: "BookIndex",
  components: {BookItem, Book},
  data() {
    return {
      showPage: 1,
      doublePage: false,
      getMaxPageNumber: 0,
    }
  },
  computed: {
    bookItem() {
      let result = []
      for (let i = 1; i <= 36; i++) {
        result.push({
          name: i,
          color: `rgb(${20*i},${i},${i})`
        })
      }
      return result
    }
  },
  methods: {
    add() {
      if(!this.doublePage) {
        this.showPage++
      } else {
        this.showPage+=2
      }
      if(this.showPage>this.getMaxPageNumber) {
        this.showPage=1
      }
    },
    minus() {
      if(!this.doublePage) {
        this.showPage--
      } else {
        this.showPage-=2
      }
      if(this.showPage<=0) {
        this.showPage=this.getMaxPageNumber
      }
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
